import AvatarTitle from "@/components/AvatarTitle";
import { EssayAPIEssay } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import { Col, ListGroupItem, Row } from "reactstrap";
import { getDatetime } from "taehui-ts/date";
import { useTo } from "taehui-ts/fe-utilities";

export default function EssayTitleView({
  forumID,
  forumTitle,
  essay: { essayID, title, avatarID, avatarName, date, commentCount, hitCount },
}: {
  forumID?: string;
  forumTitle?: string;
  essay: EssayAPIEssay;
}) {
  const t = useTranslations();
  const to = useTo();

  const isLoading = !(forumID && essayID);

  return (
    <ListGroupItem
      className={isLoading ? undefined : "route"}
      onClick={
        isLoading
          ? undefined
          : () => {
              to(`/forum/${forumID}/${essayID}`);
            }
      }
    >
      <Row className="g-0">
        <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
          <span>
            {forumTitle && `[${forumTitle}]`} {title} [{commentCount}]
          </span>
        </AvatarTitle>
        <Col className="m-1 text-end" xs="auto">
          <span>{getDatetime(date)}</span>
          <br />
          <span>{t("hitCount", { hitCount })}</span>
        </Col>
      </Row>
    </ListGroupItem>
  );
}